<script setup>
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "enterprise"
});
import { ref, onMounted } from "vue";
import {
  queryEnterprise,
  exportEnterprise,
  deleteEnterprise,
} from "@/api/platform/enterprise.js";
import SaveOrUpdate from "@/views/platform/enterprise/SaveOrUpdate.vue";
import EnterpriseMoney from "@/views/platform/enterprise/enterpriseMoney.vue"
import Xufei from "@/views/platform/enterprise/xufei.vue"
import host from "@/utils/env.js"
import { ElMessage } from 'element-plus'
//定义表格数据
const tableData = ref([]);

//同名引用 调用子组件暴露出的方法
const savaupdate = ref(null);

//分页参数
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);

//筛选条件
const filter = ref({
  name: "",
  status: ""
});

//弹窗默认不显示
const isshow = ref(false);
const xufeishow=ref(false);
const moneyisshow=ref(false)

//状态参数
const statusOptions = ref([
  {
    value: 1,
    label: "待审核"
  },
  {
    value: 2,
    label: "已审核"
  }
]);

//每页显示的个数  每页的记录数
let chg = pgsize => {
  pageSize.value = pgsize;
  page.value = 1;
  init();
};
//页数发生变化  第几页
let chgpg = pg => {
  page.value = pg;
  init();
};

//定义查询方法
function init() {
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    name: filter.value.name,
    status: filter.value.status
  };
  queryEnterprise(data).then(res => {
    if (res.code == 200) {
      tableData.value = res.data.list;
      page.value = res.data.page;
      pageSize.value = res.data.pageSize;
      total.value = res.data.total;
    }
  });
}

//导出列表
function exportExcel(data) {
  exportEnterprise({}).then(res => {
    if (res.code == 200) {
      let url = host+res.data;
      window.open(url);
    }
  });
}

//保存或修改
function saveOrUpdate(row) {
  isshow.value = true;
  savaupdate.value.init(row);
}

//定义同名引用 调用子组件暴露出的方法
const moneyEnterprise=ref(null);
const xufei=ref(null)

//资金
function entmoney(id){
  moneyisshow.value=true;
  moneyEnterprise.value.init(id)
}

//续费
function money(row){
  //将行数据传入子组件
   xufeishow.value=true;
  xufei.value.init(row)
}

//删除企业
 function deleteById(id){
  deleteEnterprise(id).then(res=>{
    if(res.code==200){
     ElMessage({
    message: '删除成功！',
    type: 'success',
  })
  init();
  }
  })

}
//生命周期函数
onMounted(() => {
  init();
});

</script>

<template>
  <div>
    <div style="background-color: #fff; height: 65px;">
      <div
        style="height: 25px; line-height: 25px; margin-left: 20px"
      >
        筛选查询
      </div>
      <div style="height: 25px; line-height: 25px; margin-left: 20px">
        <el-row>
          <el-col :span="7"
            >企业搜索：<el-input
              placeholder="请输入要查询的企业"
              v-model="filter.name"
              class="ipt"
            ></el-input
          ></el-col>
          <el-col :span="7"
            >状态：<el-select
              v-model="filter.status"
              placeholder="请选择"
              class="ipt"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option> </el-select
          ></el-col>
          <el-col :span="10" @click="init()"
            ><el-button type="primary">查询结果</el-button></el-col
          >
        </el-row>
      </div>
    </div>

    <div
      style="
        text-align: right;
        padding-right: 10px;
        height: 40px;
        line-height: 40px;
      "
    >
      <el-button type="primary" @click="exportExcel">导出</el-button>
      <el-button type="primary" @click="saveOrUpdate()">添加用户</el-button>
    </div>
    <div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="selection" width="50" />
        <el-table-column prop="code" label="企业ID" width="130" />
        <el-table-column prop="name" label="企业客户" width="130" />
        <el-table-column prop="user" label="联系人" width="100" />
        <el-table-column prop="mobile" label="手机号" width="100" />
        <el-table-column prop="createTime" label="创建时间" width="160" />
        <el-table-column prop="expireDate" label="到期时间" width="130" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-link type="primary">进入</el-link>
            <el-link type="primary" @click="saveOrUpdate(row)">资料</el-link>
            <el-link type="primary">权限</el-link>
            <el-link type="primary" @click="entmoney(row.id)">资金</el-link>
            <el-link type="primary" @click="money(row)">续费</el-link>
            <el-link type="primary" @click="deleteById(row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <!--分页-->
      <el-pagination
        background
        @current-change="chgpg"
        @size-change="chg"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        layout="total,sizes, prev, pager, next , jumper"
        :total="total"
        style="float: right; margin-top: 20px; margin-right: 20px"
      />
    </div>
    <!-- 增加或修改-->
    <SaveOrUpdate
      ref="savaupdate"
      :visible="isshow"
      @close="isshow = false"
      @refresh="init()"
    ></SaveOrUpdate>
    <!-- 资金 -->
<EnterpriseMoney ref="moneyEnterprise" :visible="moneyisshow"  @close="moneyisshow=false"></EnterpriseMoney>
<!-- 续费 -->
<Xufei ref="xufei" :visible="xufeishow" @close="xufeishow=false" @refresh="init()"></Xufei>
  </div>


</template>
<style scoped>
.el-link {
  margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
.ipt {
  width: 200px;
  margin-left: 10px;
}
</style>
